<template>
    <!-- 编辑弹窗 -->
    <el-dialog
        draggable
        title="用户信息"
        v-model="dialogVisible"
        width="300"
        append-to-body
        :close-on-click-modal="false"
    >
        <el-form :model="form" label-width="80px">
            <!-- 用户名 :编辑模式下不可修改/新增模式下必填 -->
            <el-form-item label="用户名">
                <el-input v-model="form.username" :disabled="isEdit"></el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item label="密码">
                <el-input type="password" v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item label="类型">
                <el-select v-model="form.type" placeholder="请选择用户类型">
                    <el-option label="普通用户" value="common"></el-option>
                    <el-option label="交通管理员" value="traffic"></el-option>
                    <el-option label="超级管理员" value="admin"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="handleSubmit(form)">确定</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { computed, watch, ref } from "vue";

const props = defineProps({
    isEdit: Boolean, //是否为编辑模式,编辑模式下用户名不可修改
    modelValue: Boolean, //弹窗显示状态
    handleSubmit: Function, //提交函数
    userInfo:{
        type: Object,
        default: () => ({
            username: "",
            password: "",
            type: "common",
        }),
    }
});
const emit = defineEmits(["update:modelValue"]);

// 表单数据
const form = ref({

});

//追踪userInfo数据，同步到form
watch(
    () => props.userInfo,
    (newVal) => {
        form.value = newVal;
    }
);

const dialogVisible = computed({
    get() {
        return props.modelValue;
    },
    set(val) {
        emit("update:modelValue", val);
    },
});

</script>

<style scoped></style>
